<script lang="tsx">
import Vue from 'vue'
import Component from 'vue-class-component'
import { mapMutations } from 'vuex'

interface List {
    name: string;
    icon: string;
    url: string;
}

@Component({
    methods: {
        ...mapMutations(process.env.APP_SCOPE_NAME, ['setPageTitle'])
    }
})
export default class Content extends Vue {
    public list: List[] = [
        { name: '示例', icon: 'dvr', url: '/example' }
    ]
    
    private enterItem (item: List): void {
        // this.setPageTitle(item.name)
        this.$router.push({ path: item.url })
    }

    created () {
        this.setPageTitle('App')
    }

    render (): JSX.Element {
        return (
            <div class="full-width full-height">
                <div class="layout-wrap row items-center justify-center">
                    {
                        this.list.map((item: List): JSX.Element => (
                            <div key={item.url} class="row justify-center col-4">
                                <div class="card text-center shadow-1" onClick={() => this.enterItem(item)}>
                                    <q-icon name={item.icon} color="grey-9" />
                                    <p class="caption text-grey-10 q-mt-md">{item.name}</p>
                                </div>
                            </div>
                        ))
                    }
                </div>
            </div>
        )
    }
}
</script>

<style lang="stylus" scoped>
.layout-wrap
    height calc(100vh - 100px)

    .card
        cursor pointer
        position relative
        width 200px
        padding 16px
        border-radius 6px

        .q-icon
            font-size 56px

        &:hover
            transform scale(1.4)
</style>
